<template>
  <div class="email_set_box email_registered">
    <affix :label="$t('config.channel.emailRegisteredTitle1')"></affix>
    <div class="box_con">
      <div class="box_con_li email_registered_text">
        <span >{{$t('configLazyLoad.channel.mailTip1', {name: $store.state.oemObj.oemFlag ? '' : '七陌'})}}</span>
        <br/>
        <span class="box_con_li">{{emailDomain}}</span>
        <div class="box_con_li" v-if="emailStatus === 'open'">
          <el-button type="primary" class="primary_btn">{{$t('config.channel.beOpened')}}</el-button>
        </div>
        <div class="box_con_li" v-if="emailStatus === 'close'">
          <el-button type="primary" @click="openEmeail" class="primary_btn">{{$t('config.channel.opened')}}</el-button>
        </div>
      </div>
      <div class="email_registered_img">
        <img src="../../../../../assets/img/EmailRegistered.png">
      </div>
    </div>
    <affix :label="$t('config.channel.emailRegisteredTitle2')"></affix>
    <div class="box_con email_forwarding">
      <img src="../../../../../assets/img/EmailAutoForwarding1.png">
      <img src="../../../../../assets/img/EmailAutoForwarding2.png">
    </div>
    <affix :label="$t('config.channel.emailRegisteredTitle3')"></affix>
    <div class="box_con email_forwarding">
        <img src="../../../../../assets/img/EmailAutoForwarding3.png">
        <img src="../../../../../assets/img/EmailAutoForwarding4.png">
      </div>
  </div>
</template>

<script>
  function emailServerOpen (store, mail) {
    let data = {
      name: mail
    }
    return store.dispatch('emailServerOpen', data)
  }

  import affix from '../../../../ui-modules/affix/Affix.vue'
  export default {
    name: 'mailRegistered',
    data () {
      return {
      }
    },
    computed: {
      emailDomain () {
        let email = ''
        let data = this.$store.state.config.channelConfig.channelMail.mailInfo
        if (data && data.uname && data.emailDomain) {
          email = data.uname + '@' + data.emailDomain
        }
        return email
      },
      emailStatus () {
        return this.$store.state.config.channelConfig.channelMail.status
      }
    },
    methods: {
      openEmeail () {
        if (this.emailStatus !== 'open') {
          emailServerOpen(this.$store, this.emailDomain)
        }
      },
      fetchData () {
      }
    },
    components: {
      affix
    },
    beforeMount () {
      this.fetchData()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .email_registered
    padding 20px 15px
  .box_title:before
    content ""
    display inline-block
    width 12px
    height 12px
    background-color #7CCDD1
    vertical-align middle
    margin-right 6px
  .box_title
    background-color #ddd
    margin-bottom 6px
    span
      vertical-align middle
      font-weight bold
  .box_con
    text-align center
    .box_con_li
      margin 5px 0
    .email_registered_img
      padding 40px 0
      width 676px
      margin 0 auto
      img
        max-width 100%
        width auto
  .email_registered_text
    line-height 24px
  .email_forwarding
    width 848px
    margin 0 auto
    padding 10px 40px 30px
    img
      box-shadow 0 0 10px $cf-gray4
      border-radius 10px
      margin 10px
      max-width 100%
      width auto
  .ui-affix
    padding-bottom 0
</style>
